/**
 * Created by Toma on 2017/2/2.
 * 重新显示图表
 */

var DOM = $('.contribution');
var SIZE = 10;
var MAX_HEIGHT = 100;
var COLORS = [
  new obelisk.CubeColor().getByHorizontalColor(0xeeeeee),
  new obelisk.CubeColor().getByHorizontalColor(0xd6e685),
  new obelisk.CubeColor().getByHorizontalColor(0x8cc665),
  new obelisk.CubeColor().getByHorizontalColor(0x44a340),
  new obelisk.CubeColor().getByHorizontalColor(0x1e6823)
];

var init = function () {
  var feData = fetchData();
  DOM.append(`
      <div class="ch_3D_con show_hook" id="ch_3D">
        <div class="ch_stats-right">
          <div class="ch_stats_row">
             <span class="title">最近一年贡献</span>
             <span class="number">${feData[0]}</span>
             <span class="lit">
                <small class="lit_top">&nbsp;</small>
                <small class="lit_bottom">次</small>
             </span>
          </div>
          <div class="ch_stats_row">
             <span class="title">最长连续贡献</span>
             <span class="number">${feData[1]}</span>
             <span class="lit">
                <small class="lit_top">&nbsp;</small>
                <small class="lit_bottom">天</small>
             </span>
          </div>
        </div>

        <div class="ch_stats-left">
          <div class="ch_stats_row">
             <span class="title">最近连续贡献</span>
             <span class="number">${feData[2]}</span>
             <span class="lit">
                <small class="lit_top">&nbsp;</small>
                <small class="lit_bottom">天</small>
             </span>
          </div>
        </div>
        <canvas id="canvas" width="648" height="420"></canvas>
      </div>
      `);

  var canvas = document.getElementById('canvas');
  var point = new obelisk.Point(70, 100);
  var pixelView = new obelisk.PixelView(canvas, point);

  $('#contributions_box .vertical').each(function (i) {
    if (!i) return;
    $(this).find('.box').each(function (j) {
      var data = {};
      var con = $(this).attr('data-content');
      var color = $(this).attr('class').replace(/box\s/, '').replace(/\s.*/, '');

      if (con) {
        var el = con.match(/^(\d+)\s+.*\s+(.*)$/);
        var intH = parseInt(el[1]);
        data.date = el[2];
        data.h = intH < 1 ? 3 : intH + 3;
      } else {
        data.h = 0;
        data.date = 0;
      }

      data.x = i;
      data.y = j;
      data.color = color;

      renderData(pixelView, data);
    });
  });

  readStorage();
};

var renderData = function (pixelView, data) {
  if(data.h == 0) return;
  var H = data.h === 3 ? 3 : data.h * 2;
  var dimension = new obelisk.CubeDimension(SIZE, SIZE, H < MAX_HEIGHT ? H : MAX_HEIGHT);
  var color = selColor(data.color);
  var cube = new obelisk.Cube(dimension, color, false);
  var p3d = new obelisk.Point3D(data.x * SIZE, data.y * SIZE, 0);
  pixelView.renderObject(cube, p3d);
};

var fetchData = function () {
  var data = [];
  $('#contributions_box .three p').each(function (i, el) {
    data.push(el.innerHTML.match(/\d+/)[0]);
  });

  $('#contributions_box').addClass('show_hook');
  $('.contribution > .header').append(`
    <span class="ch_select">
      <span class="sel" data-sel="contributions_box">2D</span> | <span class="sel" data-sel="ch_3D">3D</span>
    </span>
  `);

  $('.sel').on('click', function () {
    var _this = $(this);
    var id = _this.data('sel');

    _this.addClass('active').siblings().removeClass('active');
    $('#' + id).show().siblings('.show_hook').hide();

    localStorage.setItem('__GITOSC_CH3D__', id);
  });

  return data;
};

var readStorage = function () {
  if (!localStorage.__GITOSC_CH3D__) {
    localStorage.setItem('__GITOSC_CH3D__', 'ch_3D');
    $('.sel[data-sel="ch_3D"]').trigger('click');
  } else {
    $('.sel[data-sel="' + localStorage.__GITOSC_CH3D__ + '"]').trigger('click');
  }
};

var selColor = function (color) {
  if (color === 'little') return COLORS[1];
  if (color === 'some') return COLORS[2];
  if (color === 'many') return COLORS[3];
  if (color === 'much') return COLORS[4];
  return COLORS[0];
};

if (DOM.length) {
  init();
  console.log('❤ 看看我的图表 ❤');
}
